<!-- 修改密码 -->
<template>
  <div class="ChangePwd-container">
    <div class="back">
      <Back></Back>
    </div>
    <div class="main">
      <Head></Head>
      <div class="nav">
        <div class="content">
          <InputBox
            :inputArr="inputArr"
            @synchronization="getInputData"
          ></InputBox>
        </div>
        <div class="but">
          <button @click="Submit">修改密码</button>
        </div>
      </div>
    </div>
    <div class="loading" v-if="isLoadingRef">
      <Loading></Loading>
    </div>
  </div>
</template>
<script setup>
import Loading from "@/components/Loading/index.vue"
import {useRouter} from "vue-router"
import { ref } from "vue";
import Back from "@/components/background/index.vue";
import Head from "./components/Head.vue";
import InputBox from "@/components/InputBox/index.vue";
import { deepClone } from "@/util/copy.js";
import { updataLoginPwd } from "@/api/user.js";
const router = useRouter()
const isLoadingRef = ref(false);
// 输入框对象
const inputArr = ref([
  {
    title: "旧密码",
    oldLoginPwd: "",
    err: [
      { required: true, msg: "旧密码不能为空" },
      {
        regular: "^\\S{6,10}$",
        msg: "任意字符6-10位(不能有空格等)",
      },
    ],
    title_width: 80,
    input_width: 400,
    corresponding: "oldLoginPwd",
    type: "password",
  },
  {
    title: "新密码",
    newLoginPwd: "",
    err: [
      { required: true, msg: "新密码不能为空" },
      {
        regular: "^\\S{6,10}$",
        msg: "任意字符6-10位(不能有空格等)",
      },
    ],
    title_width: 80,
    input_width: 400,
    corresponding: "newLoginPwd",
    type: "password",
  },
  {
    title: "确认密码",
    confirmLoginPwd: "",
    err: [
      { required: true, msg: "不能为空" },
      {
        regular: "^\\S{6,10}$",
        msg: "任意字符6-10位(不能有空格等)",
      },
    ],
    title_width: 80,
    input_width: 400,
    corresponding: "confirmLoginPwd",
    type: "password",
  },
]);
// 深拷贝
const copyInputArr = deepClone(inputArr.value);
// 同步数据
function getInputData(data) {
  inputArr.value = data;
}
// 修改密码
async function Submit() {
    isLoadingRef.value = true
  const subminInputData = {};
  inputArr.value.forEach((item) => {
    if (item[item.corresponding]) {
      subminInputData[item.corresponding] = item[item.corresponding];
    }
  });
  if (Object.keys(subminInputData).length !== 0) {
    if (subminInputData.oldLoginPwd === subminInputData.newLoginPwd) {
      ElMessage.error("新密码不能和旧密码一致");
      isLoadingRef.value = false
      return;
    }
    if (subminInputData.newLoginPwd !== subminInputData.confirmLoginPwd) {
      ElMessage.error("新密码和确认密码不一致");
      isLoadingRef.value = false
      return;
    }
    const { data } = await updataLoginPwd(subminInputData);
    console.log(data);
    if (data.state === 1) {
      ElMessage({
        message: "修改成功",
        type: "success",
      });
      isLoadingRef.value = false
      localStorage.removeItem("token");
      sessionStorage.removeItem("token");
      sessionStorage.removeItem("userInfo");
      router.go({
        name: "login"
      });
      
    } else if(data.state === 2){
        ElMessage.error("旧密码有问题");
        isLoadingRef.value = false
    } else {
        isLoadingRef.value = false
    }
  } else {
    ElMessage.error("请输入数据");
    isLoadingRef.value = false
  }
  inputArr.value = copyInputArr
}
</script>
<style lang="less" scoped>
@import "@/styles/var.less";
@import "@/styles/mixin.less";
.ChangePwd-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  .main {
    .self-center();
    width: 80%;
    height: 80%;
    min-height: 400px;
    background: @bakeground;
    backdrop-filter: blur(5px);
    border-radius: 10px;
    box-shadow: 2px 2px 20px #626262;
    .content {
      padding: 20px;
    }
    .but {
      button {
        margin-left: 110px;
        cursor: pointer;
        width: 140px;
        height: 50px;
        background: linear-gradient(45deg, @frameColor1, @frameColor2);
        border-radius: 10px;
        color: @white;
        font-size: 20px;
        border: 0;
      }
    }
  }
  .loading{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
  }
}
</style>